@import 'src/styles/variables';
@import 'src/styles/mixins';
@import 'src/styles/themes';

// Variable overrides
$selectedRowBorderWidth: 4px;
$rowHeight: 48px;
$headerResizeHeight: 18px;

$pageTitleHeight: 85px;
$refreshBarHeight: 16px;

$icons-path: "~ag-grid-community/src/styles/icons/";
$row-height: $rowHeight;
$header-height: $rowHeight;
$background-color: transparent;
$tab-background-color: transparent;
$odd-row-background-color: transparent;
$border-color: transparent;
$panel-background-color: transparent;
$tool-panel-background-color: transparent;
$card-background-color: transparent;
$cell-highlight-border: transparent;
$cell-horizontal-border: transparent;
$header-background-color: transparent;

@import 'node_modules/ag-grid-community/src/styles/ag-grid.scss';
@import 'node_modules/ag-grid-community/src/styles/ag-theme-dark.scss';

$doublePadding: $baseContentPadding * 2;
.pcs-grid-container.ag-theme-dark {
  @include ag-theme-classic($params);
  height: calc(100% - #{$pageTitleHeight} - #{$refreshBarHeight});
  position: relative;
  font-family: $fontSelawik;
  flex-shrink: 0;

  > .pcs-grid-loading-container {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 20px 0px;

    // When the grid loader is visible, we don't want to show the
    // grid but we don't want to destroy the element either and
    // pay the initialization cost again. With these styles we hide
    // the grid when the loader is present.
    & + div {
      visibility: hidden; // Using visibility so AgGrid can autoSizeColumns correctly
      height: 1px; // Height at 1px to avoid issues with a full grid creating ghost scroll effects
    }
  }

  .ag-header-cell {
    text-transform: uppercase;
    @include rem-font-size(12px);

    .ag-icon { cursor: auto; }
  }

  &.movable-columns .ag-header-cell:not(.checkbox-column) { cursor: move; }

  .ag-row {
    margin-bottom: 0;

    .ag-cell {
      outline: none;
      border: none;
      @include rem-font-size(14px);

      &.capitalize-cell { text-transform: capitalize; }

      &.first-child-column {
        // Correct alignment of the padding since the border will add width
        padding-left: $cell-horizontal-padding - 1px - $selectedRowBorderWidth;
        border-left: $selectedRowBorderWidth solid transparent;
      }
    }

  }

  .ag-paging-button { cursor: pointer; }

  @include themify($themes) {
    .ag-header-cell-moving {
      background-color: themed('colorGridRowSelectedBackground');
      color: themed('colorGridCellText');
    }

    .ag-header { border-bottom: 1px solid themed('colorGridRowBorder'); }

    .ag-header-cell {
      color: themed('colorGridCellText');

      .ag-icon-none {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
        background-image: url(themed('gridSortIcon'));
      }

      .ag-icon-asc { background-image: url(themed('gridAscIcon')); }
      .ag-icon-desc { background-image: url(themed('gridDescIcon')); }

      .ag-header-cell-resize::after {
        height: $headerResizeHeight;
        margin-top: ($header-height - $headerResizeHeight)/2;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.1s linear;
        width: 3px;
        border-left: 1px solid transparent;
        border-color: themed('colorGridRowBorder');
      }

      &:hover {
        .ag-icon-none:not(.ag-hidden),
        .ag-header-cell-resize::after {
          visibility: visible;
          opacity: 1;
         }
      }
    }

    .ag-row {
      border-bottom: 1px solid themed('colorGridRowBorder');

      .ag-cell { color: themed('colorGridCellText'); }

      &.ag-row-hover:not(.ag-row-selected) {
        background-color: themed('colorGridRowHoverBackground');

        .first-child-column { border-color: themed('colorGridSelectedRowBorder'); }
      }

      &.ag-row-selected {
        background-color: themed('colorGridRowSelectedBackground');

        .first-child-column { border-color: themed('colorGridSelectedRowBorder'); }
      }
    }

    .ag-paging-panel {
      color: themed('colorGridHeaderText');

      .ag-paging-button {
        border: none;
        background-color: transparent;
        color: themed('colorGridHeaderText');

        &:hover {
          background-color: themed('colorGridRowBackground');
          color: themed('colorGridCellText');
        }
      }
    }
  }
}
